<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>广告编辑</title>
    <!-- Bootstrap -->	
<link href="/SmartCommunity/css/pc/bootstrap.css" rel="stylesheet">
<link href="/SmartCommunity/css/pc/main.css" rel="stylesheet">
  </head>
  <body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
				aria-expanded="false">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand  smart" href="/SmartCommunity/views/pc/smart.html">SMART</a>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
			</ul>
			<form class="navbar-form navbar-right">
				<a class="btn btn-primary" id="quit">退出</a>
			</form>
		</div>
	</div>
	</nav>
	
	<div class="col-md-2"></div>
	<div class="maincontentinner col-md-8">
		<h4 class="widgettitle">广告轮播图片管理表</h4>
		<div class="dataTables_filter">
			<div class="add_btn">
				<label>添加：</label> <a href="javascript:void(0);"
					onclick="add();"><span class="glyphicon glyphicon-plus"
					aria-hidden="true"></a></span>
			</div>
		</div>
		<table class="table table-bordered responsive">
			<thead>
				<tr>
					<th class="center">顺序</th>
					<th class="center">预览图片</th>
					<th class="center">预览详情页面</th>
					<th class="center">修改</th>
					<th class="center">删除</th>
				</tr>
			</thead>
			<tbody id="table_body">
				<tr class="template-editor" style="display: none">
					<td class="number center"></td>
					<td class=" center"><img src="/SmartCommunity/images/wechat/renzheng.png" class="pic"></img></td>
					<td class="detail_url center"><a href="javascript:void(0);"
						onclick="preview(this);"class="glyphicon glyphicon-eye-open preview"
							aria-hidden="true"></a></span></td>
					<td class="modify center"><a href="javascript:void(0);"
						onclick="modify(this);"><span class="glyphicon glyphicon-pencil"
							aria-hidden="true"></a></span></td>
					<td class="center"><a href="javascript:void(0);"
						onclick="delete_add(this);"><span
							class="glyphicon glyphicon-trash" aria-hidden="true"></a></span></td>
				</tr>

			</tbody>
		</table>
		<div id="page1" class="page_foot"></div>
	</div>
<div class="modal fade" id="exampleModalPic" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">图片展示</h4>
				</div>
				<div class="modal-body pic_show_div">
					<img class="pic_show"></img>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">修改图片及详情页面</h4>
				</div>
				<div class="modal-body">
					<form id="modify_form">
					<div class="form-group" style="display: none">
							<label for="id" class="control-label">id</label> <input
								type="number" class="form-control" id="id">
						</div>
						<div class="form-group">
							<label for="modify_pic" class="control-label">图片</label> <input
								type="file" class="form-control" id="modify_pic">
						</div>
						<div class="form-group">
							<label for="modify_editor" class="control-label">详情页面</label>&nbsp;&nbsp;<span class="imp error_detail_modify" style="display:none;">详情页面信息不能为空</span>
							<div id="modify_editor" type="text/plain" style="width:100%;height:300px;" ></div>
						</div>	
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" id="btn_sure" class="btn btn-primary"
						onclick="submitOK(this)">提交</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="exampleModalAdd" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabelAdd">添加图片及详情页面</h4>
				</div>
				<div class="modal-body">
					<form id="add_form" action="#" method="post" enctype="multipart/form-data">
						<div class="form-group">
							<span class="imp">*</span><label for="add_pic" class="control-label">图片</label>&nbsp;&nbsp;<span class="imp error_pic" style="display:none;">请选择要添加的图片</span> <input
								type="file" class="form-control" id="add_pic">
						</div>
						<div class="form-group">
							<span class="imp">*</span><label for="add_editor" class="control-label">详情页面</label>&nbsp;&nbsp;<span class="imp error_detail" style="display:none;">请输入详情页面信息</span>
							<div id="add_editor" type="text/plain" style="width:100%;height:300px;" ></div>
						</div>	
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" id="btn_sure_add" class="btn btn-primary"
						onclick="submitOKAdd(this)">添加</button>
				</div>
			</div>
		</div>
	</div>
<script src="/SmartCommunity/js/pc/jquery.js"></script>
<script src="/SmartCommunity/js/pc/init.js"></script>
<script src="jquery.form.js"></script>
    <script src="/SmartCommunity/js/pc/bootstrap.js"></script>
    <script src="/SmartCommunity/js/pc/jquery.atmosphere.js"></script>
    <script src="/SmartCommunity/js/pc/page.js"></script>
        <script src="/SmartCommunity/js/pc/form.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript" charset="utf-8" src="/SmartCommunity/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/SmartCommunity/ueditor/ueditor.all.js"> </script>
     <script type="text/javascript" charset="utf-8" src="/SmartCommunity/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script>
		init();
		var page_num=1;
		var COUNT_PAGE=5;
		ajax_trans("/SmartCommunity/pc/get_admin_list?page="+page_num);
	function ajax_trans(url_http){
			$.ajax({
				type: "POST",
				url: url_http,
				contentType: "application/json;charset=utf-8",
				success: function(data){
					var arr=eval("("+data+")");
					var pages = Math.ceil(parseInt(arr.count)/COUNT_PAGE);
					$("#page1").unbind();
					count_pages(pages);
					arr1=arr.content;
					for(var i =0; i <arr1.length; i++){
				    	var row = $(".template-editor").eq(0).clone();
						row.find(".number").text("广告"+(i+1));
						row.find(".pic").attr("src",arr1[i].pictureUrl);
						row.find(".preview").css("href",arr1[i].detailUrl);
						row.attr("id",arr1[i].id);
						if(i==0){
							document.getElementById("table_body").innerHTML="";
						}
						row.css("display", "table-row");
						row.appendTo("#table_body");   
				    }
				},
				error: function(data){
					alert("error");	
				} 
				});
		}
	function ajax_trans_page(url_http){
		$.ajax({
			type: "POST",
			url: url_http,
			contentType: "application/json;charset=utf-8",
			success: function(data){
				var arr=eval("("+data+")");
				arr1=arr.content;
				for(var i =0; i <arr1.length; i++){					
			    	var row = $(".template-editor").eq(0).clone();
					row.find(".number").text("广告"+(i+1+(page_num-1)*COUNT_PAGE));
					row.find(".pic").text(arr1[i].pictureUrl);
					row.find(".detail_url").text(arr1[i].detailUrl);
					row.attr("id",arr1[i].id);
					if(i==0){
						document.getElementById("table_body").innerHTML="";
					}
					row.css("display", "table-row");
					row.appendTo("#table_body");  
			    }
			},
			error: function(data){
				alert("error");	
			} 
			});
	}
function count_pages(num){
	 $("#page1").createPage({
	        pageCount:num,
	        current:page_num,
	        backFn:function(p){
	        	page_num=p;
	        	ajax_trans_page("/SmartCommunity/pc/get_admin_list?page="+p);
	        }		
	    });	
}	
var ue_modify = UE.getEditor('modify_editor');
function modify(obj){
	var par=$(obj).parent().parent();
	var temp=par.attr("id");
	$("#id").val(temp);
	$.ajax({
		type:"POST",
		url:"",
		async:false,
		contentTpye:"application/json;charset=utf-8",
		data:{id:temp},
		success:function(data)
		{
			var arr=eval("("+data+")");
			ue_modify.setContent(arr.content);
		},
		error:function(data)
		{
			alert("error");
		}
	});
	$(".error_detail_modify").hide();
	$('#exampleModal').modal('show');
}
function submitOK(e){
	var arr = [];
    arr.push(ue_modify.getContent());
    var temp=ue.hasContents();
    if(!temp){
    	$(".error_detail_modify").show();
    	ue.focus();
    	return false;	        	
    }
    $(".error_detail_modify").hide();
    $('#modify_form').ajaxForm({
	    success: function(data) {
	    	if(data=="true"){
				alert("修改成功");
				ajax_trans_page("/SmartCommunity/pc/get_admin_list?page="+page_num);
			}
			else{
				alert("修改失败！");
			}
	    },
		error:function(){
			alert("error");
		}
	});
}
		
		var ue = UE.getEditor('add_editor');
		function add(){
			var file = $("#add_pic");
			file.after(file.clone().val(""));
			file.remove(); 
			ue.setContent("");
			$(".error_pic").hide();
			$(".error_detail").hide();
			$('#exampleModalAdd').modal('show');
		}
		function submitOKAdd(e){
			var add_pic=$('#add_pic').val();
			alert(add_pic);
			var arr = [];
	        arr.push(ue.getContent());
			if(add_pic==""){
				$(".error_pic").show();
				return false;
			}
			$(".error_pic").hide();
			var temp=ue.hasContents();
	        if(!temp){
	        	$(".error_detail").show();
	        	ue.focus();
	        	return false;	        	
	        }	        
			$(".error_detail").hide();
			$('#add_form').ajaxForm({
			    success: function(data) {
			    	if(data=="true"){
						alert("添加成功");
						ajax_trans_page("/SmartCommunity/pc/get_admin_list?page="+page_num);
					}
					else{
						alert("添加失败！");
					}
			    },
				error:function(){
					alert("error");
				}
			});		
		}
		function delete_add(e){
			var par=$(e).parent().parent();
			var id_d=par.attr("id");
			if (confirm("你确定删除吗？")) { 
				$.ajax({
					type:"POST",
					url:"",
					contentTpye:"application/json;charset=utf-8",
					data:{id:id_d},
					success:function(data){
						if(data=="true"){
							ajax_trans_page("/SmartCommunity/pc/get_admin_list?page="+page_num); 
						}
						else{
							alert("删除失败！");
						}
					},
					error:function(){
						alert("error");
					}
				});
				  
		        }  	
			
			 		
		}
		function preview(e){
			var par=$(e).parent().parent();
			var temp=par.attr("id");
			window.open('editor-detail.html?id='+temp);
		}
		$("body").on("click",".pic",function(){
			$(".pic_show").attr("src",this.src);
			$('#exampleModalPic').modal('show');
			
		});
	</script>
  </body> 
</html>